<template>
	<!-- 跑腿/代运-订单信息 -->
	<view class="OrderingInformation public">
		<view class="main">
			<view class="header">
				<view class="orderGoods">订单状态</view>
				<view class="rider">{{ form.order_status == 0 ? '待支付' : form.order_status == 1 ? '待接单' : form.order_status == 2 ?
					'配送中' :
					form.order_status == 3 ? '已完成' : form.order_status == 4 ? '已关闭' : '' }}</view>
				<!-- 支付状态;0-待支付;1-已支付; 订单状态;0-待支付;1-待接单;2-进行中;3-已完成;4-已关闭 -->
				<!-- <view class="serviceDate">送达时间：12：30-12：50</view> -->
			</view>
			<view class="address">
				<template v-if="form.order_type == 3">
					<view class="mainOne">
						<view class="addressStatus flexjcc">
							<text>搬</text>
						</view>
						<view class="address-main">
							<view class="">
								{{ form.receiving_address.data.address }}
							</view>
							<view class="">
								<text> {{ form.receiving_address.data.mobile }}</text>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="mainTwo">
						<view class="main-item">
							<view class="addressStatus putAway flexjcc">
								<text>{{ form.order_type == 0 ? '送' : form.order_type == 2 ? '买' : form.order_type == 1 ? '取' : ''
								}}</text>
							</view>
							<view class="address-main">
								<view class="">
									{{ form.take_address.data.address }}
								</view>
								<view class="">
									{{ form.take_address.data.mobile }}
								</view>
							</view>
						</view>
						<view class="main-item two">
							<view class="addressStatus putAway flexjcc">
								<text>收</text>
							</view>
							<view class="address-main">
								<view class="">
									{{ form.receiving_address.data.address }}
								</view>
								<view class="">
									{{ form.receiving_address.data.mobile }}
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
			<view class="ExpenseDetails">
				<view class="ExpenseDetails-title">
					费用明细
				</view>
				<template v-if="form.order_type == 0">
					<view class="ExpenseDetails-main">
						<view class="ExpenseDetails-main-item flexjcsb">
							<view class="">
								物品投保
							</view>
							<view class="">
								{{ form.price }}
							</view>
						</view>
						<view class="ExpenseDetails-main-item flexjcsb">
							<view class="">
								小费
							</view>
							<view class="">
								{{ form.tip }}元
							</view>
						</view>
						<view class="ExpenseDetails-main-item flexjcsb">
							<view class="">
								基础运费（3公里）
							</view>
							<view class="">
								1元
							</view>
						</view>
					</view>
				</template>
				<template v-if="form.order_type == 2">
					<view class="ExpenseDetails-main">
						<view class="ExpenseDetails-main-item flexjcsb">
							<view class="">
								物品
							</view>
							<view class="">
								{{ form.content }}
							</view>
						</view>

					</view>
				</template>
				<template v-if="form.order_type == 1">
					<view class="ExpenseDetails-main">
						<view class="ExpenseDetails-main-item flexjcsb">
							<view class="">
								物品
							</view>
							<view class="">
								{{ form.content }}
							</view>
						</view>
						<view class="ExpenseDetails-main-item flexjcsb">
							<view class="">
								物品投保
							</view>
							<view class="">
								{{ form.price }}
							</view>
						</view>
					</view>
				</template>
				<template v-if="form.order_type == 3">
					<view class="ExpenseDetails-main">
						<view class="ExpenseDetails-main-item flexjcsb">
							<view class="">
								物品
							</view>
							<view class="">
								{{ form.content }}
							</view>
						</view>
						<view class="ExpenseDetails-main-item flexjcsb">
							<view class="">
								搬运时间
							</view>
							<view class="">
								{{ form.start_time }}
							</view>
						</view>
						<view class="ExpenseDetails-main-item flexjcsb">
							<view class="">
								服务时长
							</view>
							<view class="">
								{{ form.time }}
							</view>
						</view>
						<view class="ExpenseDetails-main-item flexjcsb">
							<view class="">
								小费
							</view>
							<view class="">
								{{ form.tip }}元
							</view>
						</view>
					</view>
				</template>
			</view>
			<view class="Information">
				<view class="Information-item flexjcsb">
					<text class="Information-item-left">订单号码</text>
					<text class="Information-item-right">{{ form.sn }}</text>
				</view>
				<view class="Information-item flexjcsb">
					<text class="Information-item-left">下单时间</text>
					<text class="Information-item-right">
						<text>{{ form.create_time }}</text>
					</text>
				</view>
				<!-- <view class="Information-item flexjcsb">
					<text class="Information-item-left">支付方式</text>
					<text class="Information-item-right">微信支付</text>
				</view> -->
			</view>
			<!-- <view class="footer-button">
				<view class="footer-button-main">
					<view class="void flexjcc" @click="contactTheRider">
						联系骑手
					</view>
					<view class="solid flexjcc">
						再来一单
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
export default {
	components: {

	},
	data() {
		return {
			form: '', // 骑手状态
		}
	},
	onLoad(options) {
		this.form = JSON.parse(options.data)
		console.log(this.form);
	},
	methods: {
		contactTheRider() {
			uni.makePhoneCall({
				phoneNumber: '15733335555',
			})
		}
	}
}
</script>

<style lang="less" scoped>
.OrderingInformation {
	background: #FBFBFB;

	// .map {
	// 	width: 750rpx;
	// 	height: 721rpx;
	// }
	.main {
		width: 702rpx;
		margin: auto;

		.header {
			.orderGoods {
				font-size: 36rpx;
				font-weight: 500;
				color: #F14500;
				padding-top: 34rpx;
			}

			.rider {
				font-size: 28rpx;
				font-weight: 500;
				color: #F14500;
				padding: 16rpx 0;
			}

			.serviceDate {
				font-size: 22rpx;
				font-weight: 500;
				color: #202020;
				padding-bottom: 27rpx;
			}
		}

		// 地址
		.address {
			display: flex;
			align-items: center;
			// width: 702rpx;
			// height: 125rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(118, 118, 118, 0.09);
			border-radius: 10rpx;
			padding: 41rpx 0 37rpx 0;

			.mainOne {
				display: flex;
				align-items: center;
			}

			.mainTwo {
				.main-item {
					display: flex;
					align-items: center;
				}

				.two {
					padding-top: 52rpx;
				}

				.putAway {
					background-color: #F14500;
				}
			}

			.addressStatus {

				background: #F9CE27;
				border-radius: 50%;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin: 0 18rpx 0 24rpx;

				text {
					width: 52rpx;
					height: 52rpx;
					text-align: center;
					line-height: 52rpx;
				}
			}

			.address-main {
				view:first-child {
					font-size: 28rpx;
					font-weight: 500;
					color: #535353;
				}

				view:last-child {
					font-size: 20rpx;
					font-weight: 400;
					color: #828282;
				}
			}
		}

		// 费用明细
		.ExpenseDetails {
			// width: 702rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(118, 118, 118, 0.09);
			border-radius: 10rpx;
			padding: 0 39rpx 0 30rpx;
			margin: 12rpx 0;

			.ExpenseDetails-title {
				font-size: 28rpx;
				font-weight: 500;
				color: #313131;
				padding: 24rpx 0 26rpx 0;
			}

			.ExpenseDetails-main {
				font-size: 24rpx;
				font-weight: 400;
				color: #313131;

				.ExpenseDetails-main-item {
					padding: 5rpx 0;
				}

				.ExpenseDetails-main-item:last-child {
					font-weight: 500;

					text {
						font-size: 36rpx;
					}
				}
			}
		}

		// 订单信息
		.Information {
			// height: 236rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(118, 118, 118, 0.09);
			border-radius: 10rpx;
			padding: 0 31rpx;

			.Information-item {
				font-size: 24rpx;
				font-weight: 400;
				color: #959595;
				padding: 10rpx 0;

				.Information-item-right {
					color: #3D3D3D;

					text:last-child {
						padding-left: 15rpx;
					}
				}
			}

			.Information-item:first-child {
				padding-top: 22rpx;
			}

			.Information-item:last-child {
				padding-bottom: 15rpx;
			}
		}

		// 按钮
		.footer-button {
			display: flex;
			align-items: center;
			position: fixed;
			bottom: 0;
			left: 0;
			height: 110rpx;
			width: 750rpx;
			background: #FFFFFF;

			view {
				// width: 259rpx;
				// height: 89rpx;
				width: 158rpx;
				height: 60rpx;
				border-radius: 44rpx;
				font-weight: 400;
			}

			view:last-child {
				margin-left: 20rpx;
			}

			.footer-button-main {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				width: 702rpx;
				margin: auto;
			}

			.void {
				color: #F14500;
				border: 1px solid #F14500;
			}

			.solid {
				color: #FFFFFF;
				background: #F14500;
			}
		}
	}
}
</style>